<template>
  <el-card>
    <div v-for="item1 in state" :key="item1.id">
      <div class="all">
        <el-checkbox
          v-model="item1.isCheckAll"
          :indeterminate="item1.isIndeterminate"
          @change="changeCheckAll(item1)"
          >{{ item1.name }}</el-checkbox
        >
      </div>
      <el-checkbox-group v-model="item1.checked" @change="groupChange(item1)">
        <el-checkbox
          v-for="item2 in item1.children"
          :key="item2.id"
          :label="item2.id"
          >{{ item2.name }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div class="flex">
      <el-button>清空</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import {
  getRoleResourceApi,
  getResourceListApi,
  getResourceCategoryAllApi,
  allocResourceApi,
} from "./api";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

const route = useRoute();

type IState = IResourceCategoryModel & {
  //二级目录
  children: IResourceModel[];
  //二级目录舒服选中
  checked: Number[];
  //全选
  isCheckAll: Boolean;
  //半选
  isIndeterminate: Boolean;
};
let state = ref<IState[]>([]);

//要求三个请求都成功，再继续往下跑

if (route.query.id) {
  Promise.all([
    getResourceCategoryAllApi(),
    getResourceListApi(),
    getRoleResourceApi(parseInt(route.query.id as string)),
  ])
    .then((res) => {
      //一级目录
      state.value = res[0].data.map((item) => ({
        //一级目录
        ...item,
        //二级目录
        children: [],
        //二级目录的是否选中
        checked: [],
        isCheckAll: false,
        isIndeterminate: false,
      }));
      //处理二级目录children数组
      res[1].data.forEach((resource) => {
        const cate = state.value.find(
          (cate) => cate.id === resource.categoryId
        );
        cate && cate.children.push(resource);
      });
      //处理checked数组
      res[2].data.forEach((item) => {
        const isCheck = state.value.find(
          (item2) => item2.id === item.categoryId
        );
        isCheck?.checked.push(item.id);
      });
      //处理全选和半选
      state.value.forEach((item) => {
        //全选
        item.isCheckAll = item.checked.length === item.children.length;
        //半选
        item.isIndeterminate =
          item.checked.length > 0 && item.checked.length < item.children.length;
      });
      console.log(state.value);
    })
    .catch(() => {});
}

//全选和全不选功能
const changeCheckAll = (data: IState) => {
  if (!data.isCheckAll) {
    data.checked = [];
  } else {
    data.checked = data.children.map((item) => item.id);
  }
};

//半选功能
const groupChange = (data: IState) => {
  //全选
  data.isCheckAll = data.checked.length === data.children.length;
  //半选
  data.isIndeterminate =
    data.checked.length > 0 && data.checked.length < data.children.length;
};

//提交后台
const submit = () => {
  ElMessageBox.confirm("是否提交修改", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      allocResourceApi({
        roleId: parseInt(route.query.id as string),
        resourceIds: state.value.reduce<Number[]>((pre, next) => {
          return pre.concat(next.checked);
        }, []),
      });
    })
    .catch(() => {});
};
</script>
<style lang="less" scoped>
.all {
  padding: 20px;
  background-color: #f2f6fc;
}

:deep(.el-checkbox-group) {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  padding: 20px;
}
.flex {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>
